<script defer src="https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js"></script>

<style>
  .docs-story [data-theme-provider] {
    background-color: transparent;
  }

  h1, h2, h3, h4, h5, h6, p, th, td {
    color: var(--color-fg) !important;
    border-color: var(--color-bd) !important;
    font-family: var(--font-family) !important;
  }

  th:not(.sb-unstyled th), td:not(.sb-unstyled td),
  .css-s230ta {
    border-color: var(--color-bd) !important;
  }

  td:not(.sb-unstyled td),
  .css-s230ta {
    background-color: var(--color-bg-elevation-1) !important;
  }

  code:not(:has(span)):not(.sb-unstyled code),
  .css-o1d7ko {
    background-color: var(--color-bg-accent-subtle) !important;
    color: var(--color-fg-on-accent-subtle) !important;
    border: none !important;
  }

  /** Note: adding this so that all links are styled the same way excepts the one that are in the story */
  a:not(.docs-story a):not(.sb-unstyled a) {
    color: var(--color-fg-accent) !important;
  }

  .css-qa4clq :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)),
  .css-qa4clq :where(span:not(.sb-anchor, .sb-unstyled, .sb-unstyled span)) {
    font-family: var(--font-family) !important;
  }

  .css-qa4clq :where(span:not(.sb-anchor, .sb-unstyled, .sb-unstyled span)) {
    font-size: inherit !important;
  }
</style>
